<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			h1 {
				color: rgba(120,120,120,.1); /*RGB*/ 
			}
			.danci{
				word-spacing: 5px;   /*单词的间隔*/
				text-transform: uppercase;
			}
			.zifu {
				letter-spacing: 5px;  /* 字符之间的间隔 */
				text-transform: capitalize;
			}
			.home {
				/* letter-spacing: 20px; */
				word-spacing: 5px;
				text-decoration: line-through;
			}
			.height {
				width: 1200px;
				height: 100px;
				background-color: #808080;
				/* text-align: right;  /* 文本水平居中 */ */
				line-height:33px ;
				color: #FF6700;
				text-indent: -32px;
			}
			#link {
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<h1>文本样式</h1>
			<!-- 
			文本颜色 
			color 关键字  rgb 十六进制颜色值 #ffffff (0-9,A-F)  rgba
			色域：
			单词的间隔
			word-spacing
			 字间距
			letter-spacing
			行间距 （行高）  单行文本可以设置行高跟父元素一样，使他垂直居中
			文本水平方向对齐
			text-align ： left   /center   /right
			
			文本的缩进
			text-indent  可以支持负值
			文本转换 （大小写）
			text-transform  /lowercase  uppercase /capitalize
			文本修饰  (线条)
			text-decoration   /underline  /none  /overline  /line-through
			
			溢出处理：
			overflow  /auto
			文本溢出
			text-overflow  ellipsis
			处理空白字符
			white-space  ：nowrap  
			-->
			<p class="biaozhun">Lorem ipsum dolor sit amet, consectetur adipisicing elit. et laudantium sequi laboriosam voluptas similique quaerat temporibus.</p>
			<p class="danci">Lorem ipsum dolor sit amet, consectetur adipisicing elit. et laudantium sequi laboriosam voluptas similique quaerat temporibus.</p>
			<p class="zifu">Lorem ipsum dolor sit amet, consectetur adipisicing elit. et laudantium sequi laboriosam voluptas similique quaerat temporibus.</p>
			<ul>
				<li class="home">首页</li>
			</ul>
			<div class="height">
				<!-- <p class="wuhan">luptates facere eius dolor fugiat!</p> -->
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos repellendus voluptatum quidem quod earum non consequuntur quia doloremque at atque enim vel mollitia quo. Eius iusto laboriosam veritatis odio ipsam.</p>
			</div>
			<a id="link" href="#">秦皇岛职业技术学院</a>
	</body>
</html>
